<template>
  <div class="health-data">
    <!-- 顶部状态栏 -->
    <div class="status-bar">
      <div class="status-left">9:41</div>
      <div class="status-right">
        <div class="signal"></div>
        <div class="wifi"></div>
        <div class="battery"></div>
      </div>
    </div>

    <!-- 头部导航 -->
    <div class="header">
      <div class="back-button" @click="goBack">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
      </div>
      <h1 class="title">健康数据</h1>
      <div class="header-actions">
        <div class="search-icon" @click="toggleSearch">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
            <circle cx="11" cy="11" r="8"/>
            <path d="m21 21-4.35-4.35"/>
          </svg>
        </div>
        <div class="filter-icon" @click="toggleFilter">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
            <polygon points="22,3 2,3 10,12.46 10,19 14,21 14,12.46"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- 搜索栏 -->
    <div class="search-section" v-if="showSearch">
      <div class="search-input-wrapper">
        <input
          v-model="searchQuery"
          @input="handleSearch"
          type="text"
          placeholder="搜索健康数据..."
          class="search-input"
        />
        <div class="clear-button" @click="clearSearch" v-if="searchQuery">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"/>
            <line x1="6" y1="6" x2="18" y2="18"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- 筛选选项 -->
    <div class="filter-section" v-if="showFilter">
      <div class="filter-tabs">
        <div
          v-for="filter in filters"
          :key="filter.key"
          :class="['filter-tab', { active: activeFilter === filter.key }]"
          @click="setFilter(filter.key)"
        >
          {{ filter.label }}
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="content" ref="listContainer" @scroll="handleScroll">
      <!-- 健康概览卡片 -->
      <div class="overview-card">
        <h3 class="overview-title">健康概览</h3>
        <div class="overview-stats">
          <div class="stat-item">
            <div class="stat-value">{{ healthScore }}</div>
            <div class="stat-label">健康评分</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ dataCount }}</div>
            <div class="stat-label">数据记录</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ lastUpdate }}</div>
            <div class="stat-label">最后更新</div>
          </div>
        </div>
      </div>

      <!-- 数据类别列表 -->
      <div class="data-categories">
        <div
          v-for="category in displayedCategories"
          :key="category.id"
          class="data-category-card"
          @click="viewCategory(category)"
        >
          <div class="category-header">
            <div class="category-icon" :style="{ backgroundColor: category.color }">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                <path v-if="category.icon === 'heart'" d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                <path v-else-if="category.icon === 'activity'" d="M22 12h-4l-3 9L9 3l-3 9H2"/>
                <path v-else-if="category.icon === 'scale'" d="M6 2l3 2h6l3-2"/>
                <path v-else-if="category.icon === 'thermometer'" d="M14 14.76V3.5a2.5 2.5 0 0 1 5 0v11.26a4.5 4.5 0 1 1-5 0z"/>
                <path v-else-if="category.icon === 'droplet'" d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/>
                <path v-else-if="category.icon === 'zap'" d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
              </svg>
            </div>
            <div class="category-info">
              <h4 class="category-name">{{ category.name }}</h4>
              <p class="category-description">{{ category.description }}</p>
            </div>
            <div class="category-actions">
              <div class="favorite-button" @click.stop="toggleFavorite(category)">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                </svg>
              </div>
              <div class="arrow">→</div>
            </div>
          </div>
          <div class="category-data">
            <div class="data-preview">
              <span class="current-value">{{ category.currentValue }}</span>
              <span class="unit">{{ category.unit }}</span>
            </div>
            <div class="trend-indicator" :class="category.trend">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path v-if="category.trend === 'up'" d="M18 15l-6-6-6 6"/>
                <path v-else-if="category.trend === 'down'" d="M6 9l6 6 6-6"/>
                <path v-else d="M5 12h14"/>
              </svg>
              <span class="trend-text">{{ category.trendText }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载更多 -->
      <div class="loading-section" v-if="isLoading">
        <div class="loading-spinner"></div>
        <span>加载中...</span>
      </div>

      <!-- 没有更多数据 -->
      <div class="no-more" v-if="!hasMore && displayedCategories.length > 0">
        <span>没有更多数据了</span>
      </div>

      <!-- 空状态 -->
      <div class="empty-state" v-if="displayedCategories.length === 0 && !isLoading">
        <div class="empty-icon">
          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1">
            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
          </svg>
        </div>
        <h3>暂无健康数据</h3>
        <p>开始记录您的健康数据，让健康管理更科学</p>
      </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
      <div class="nav-item" @click="goHome">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
          <polyline points="9,22 9,12 15,12 15,22"/>
        </svg>
        <span>首页</span>
      </div>
      <div class="nav-item active">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
        </svg>
        <span>健康</span>
      </div>
      <div class="nav-item" @click="goToMedicalHome">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
          <rect x="8" y="2" width="8" height="4" rx="1" ry="1"/>
        </svg>
        <span>医疗</span>
      </div>
      <div class="nav-item" @click="goToProfile">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
          <circle cx="12" cy="7" r="4"/>
        </svg>
        <span>我的</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式状态
const searchQuery = ref('')
const showSearch = ref(false)
const showFilter = ref(false)
const activeFilter = ref('all')
const isLoading = ref(false)
const hasMore = ref(true)
const currentPage = ref(1)
const pageSize = ref(10)
const listContainer = ref<HTMLElement>()

// 筛选选项
const filters = [
  { key: 'all', label: '全部数据' },
  { key: 'vital', label: '生命体征' },
  { key: 'activity', label: '运动数据' },
  { key: 'nutrition', label: '营养数据' },
  { key: 'sleep', label: '睡眠数据' },
  { key: 'favorite', label: '收藏' }
]

// 健康概览数据
const healthScore = ref(85)
const dataCount = ref(156)
const lastUpdate = ref('2小时前')

// 生成模拟数据
const generateMockCategories = () => {
  const categories = [
    {
      id: 1,
      name: '心率',
      description: '实时心率监测数据',
      icon: 'heart',
      color: '#FF6B6B',
      currentValue: '72',
      unit: 'bpm',
      trend: 'stable',
      trendText: '正常',
      type: 'vital',
      isFavorite: false
    },
    {
      id: 2,
      name: '血压',
      description: '收缩压/舒张压监测',
      icon: 'activity',
      color: '#4ECDC4',
      currentValue: '120/80',
      unit: 'mmHg',
      trend: 'up',
      trendText: '+5',
      type: 'vital',
      isFavorite: true
    },
    {
      id: 3,
      name: '体重',
      description: '体重变化趋势',
      icon: 'scale',
      color: '#45B7D1',
      currentValue: '65.2',
      unit: 'kg',
      trend: 'down',
      trendText: '-0.5',
      type: 'vital',
      isFavorite: false
    },
    {
      id: 4,
      name: '体温',
      description: '体温监测记录',
      icon: 'thermometer',
      color: '#96CEB4',
      currentValue: '36.8',
      unit: '°C',
      trend: 'stable',
      trendText: '正常',
      type: 'vital',
      isFavorite: false
    },
    {
      id: 5,
      name: '血氧',
      description: '血氧饱和度监测',
      icon: 'droplet',
      color: '#FFEAA7',
      currentValue: '98',
      unit: '%',
      trend: 'stable',
      trendText: '正常',
      type: 'vital',
      isFavorite: true
    },
    {
      id: 6,
      name: '步数',
      description: '今日步数统计',
      icon: 'activity',
      color: '#DDA0DD',
      currentValue: '8,432',
      unit: '步',
      trend: 'up',
      trendText: '+1,200',
      type: 'activity',
      isFavorite: false
    },
    {
      id: 7,
      name: '卡路里',
      description: '消耗卡路里统计',
      icon: 'zap',
      color: '#FFB347',
      currentValue: '1,850',
      unit: 'kcal',
      trend: 'up',
      trendText: '+150',
      type: 'activity',
      isFavorite: false
    },
    {
      id: 8,
      name: '睡眠时长',
      description: '昨晚睡眠质量',
      icon: 'activity',
      color: '#87CEEB',
      currentValue: '7.5',
      unit: '小时',
      trend: 'up',
      trendText: '+0.5',
      type: 'sleep',
      isFavorite: true
    },
    {
      id: 9,
      name: '水分摄入',
      description: '今日水分摄入量',
      icon: 'droplet',
      color: '#98FB98',
      currentValue: '2.1',
      unit: 'L',
      trend: 'down',
      trendText: '-0.3',
      type: 'nutrition',
      isFavorite: false
    },
    {
      id: 10,
      name: '血糖',
      description: '血糖监测数据',
      icon: 'activity',
      color: '#F0E68C',
      currentValue: '5.2',
      unit: 'mmol/L',
      trend: 'stable',
      trendText: '正常',
      type: 'vital',
      isFavorite: false
    }
  ]

  // 生成更多数据
  for (let i = 11; i <= 50; i++) {
    const types = ['vital', 'activity', 'nutrition', 'sleep']
    const icons = ['heart', 'activity', 'scale', 'thermometer', 'droplet', 'zap']
    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#FFB347', '#87CEEB', '#98FB98', '#F0E68C']
    
    categories.push({
      id: i,
      name: `健康指标${i}`,
      description: `健康数据描述${i}`,
      icon: icons[Math.floor(Math.random() * icons.length)],
      color: colors[Math.floor(Math.random() * colors.length)],
      currentValue: (Math.random() * 100).toFixed(1),
      unit: '单位',
      trend: ['up', 'down', 'stable'][Math.floor(Math.random() * 3)],
      trendText: ['+1.2', '-0.8', '正常'][Math.floor(Math.random() * 3)],
      type: types[Math.floor(Math.random() * types.length)],
      isFavorite: Math.random() > 0.7
    })
  }

  return categories
}

const allCategories = ref(generateMockCategories())

// 计算属性
const filteredCategories = computed(() => {
  let filtered = allCategories.value

  // 搜索过滤
  if (searchQuery.value) {
    filtered = filtered.filter(category =>
      category.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      category.description.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }

  // 类型过滤
  if (activeFilter.value !== 'all') {
    if (activeFilter.value === 'favorite') {
      filtered = filtered.filter(category => category.isFavorite)
    } else {
      filtered = filtered.filter(category => category.type === activeFilter.value)
    }
  }

  return filtered
})

const displayedCategories = computed(() => {
  return filteredCategories.value.slice(0, currentPage.value * pageSize.value)
})

// 方法
const goBack = () => {
  router.back()
}

const goHome = () => {
  router.push('/home')
}

const goToMedicalHome = () => {
  router.push('/medical-home')
}

const goToProfile = () => {
  router.push('/medical-home')
}

const toggleSearch = () => {
  showSearch.value = !showSearch.value
  if (!showSearch.value) {
    searchQuery.value = ''
  }
}

const toggleFilter = () => {
  showFilter.value = !showFilter.value
}

const handleSearch = () => {
  resetData()
}

const clearSearch = () => {
  searchQuery.value = ''
  resetData()
}

const setFilter = (filter: string) => {
  activeFilter.value = filter
  resetData()
}

const toggleFavorite = (category: any) => {
  category.isFavorite = !category.isFavorite
}

const viewCategory = (category: any) => {
  console.log('查看类别:', category.name)
  // 跳转到步数页面
  if (category.name === '步数') {
    router.push('/step-tracking')
  }
  // 跳转到体重页面
  else if (category.name === '体重') {
    router.push('/weight-tracking')
  }
  // 跳转到血压页面
  else if (category.name === '血压') {
    router.push('/blood-pressure-tracking')
  }
  // 这里可以添加其他类别的跳转逻辑
}

const loadMoreData = () => {
  if (isLoading.value || !hasMore.value) return

  isLoading.value = true
  
  // 模拟异步加载
  setTimeout(() => {
    const totalItems = filteredCategories.value.length
    const currentItems = currentPage.value * pageSize.value
    
    if (currentItems >= totalItems) {
      hasMore.value = false
    } else {
      currentPage.value++
    }
    
    isLoading.value = false
  }, 1000)
}

const resetData = () => {
  currentPage.value = 1
  hasMore.value = true
  loadMoreData()
}

const handleScroll = () => {
  if (!listContainer.value) return
  
  const { scrollTop, scrollHeight, clientHeight } = listContainer.value
  if (scrollTop + clientHeight >= scrollHeight - 100) {
    loadMoreData()
  }
}

// 生命周期
onMounted(() => {
  nextTick(() => {
    loadMoreData()
  })
})
</script>

<style scoped lang="scss">
.health-data {
  min-height: 100vh;
  background: #f5f5f5;
  position: relative;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #000;
  color: white;
  font-size: 14px;
  font-weight: 600;

  .status-right {
    display: flex;
    gap: 5px;
    align-items: center;
  }

  .signal, .wifi, .battery {
    width: 20px;
    height: 12px;
    background: #fff;
    border-radius: 2px;
  }

  .signal {
    background: linear-gradient(90deg, #fff 0%, #fff 80%, transparent 80%);
  }

  .wifi {
    background: radial-gradient(circle at 50% 50%, transparent 0, transparent 3px, #fff 3px, #fff 6px, transparent 6px);
  }

  .battery {
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      right: -3px;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      height: 6px;
      background: #fff;
      border-radius: 0 1px 1px 0;
    }
  }
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: linear-gradient(135deg, #1877F2 0%, #005AFF 100%);
  color: white;
  position: relative;

  .back-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }
  }

  .title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
  }

  .header-actions {
    display: flex;
    gap: 10px;

    .search-icon, .filter-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }
}

.search-section {
  padding: 15px 20px;
  background: white;
  border-bottom: 1px solid #eee;

  .search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;

    .search-input {
      flex: 1;
      padding: 12px 40px 12px 15px;
      border: 1px solid #ddd;
      border-radius: 25px;
      font-size: 14px;
      outline: none;
      transition: border-color 0.3s;

      &:focus {
        border-color: #1877F2;
      }
    }

    .clear-button {
      position: absolute;
      right: 15px;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #999;
      border-radius: 50%;
      transition: background-color 0.3s;

      &:hover {
        background: #f0f0f0;
      }
    }
  }
}

.filter-section {
  padding: 15px 20px;
  background: white;
  border-bottom: 1px solid #eee;

  .filter-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;

    .filter-tab {
      padding: 8px 16px;
      border-radius: 20px;
      background: #f0f0f0;
      color: #666;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: #e0e0e0;
      }

      &.active {
        background: #1877F2;
        color: white;
      }
    }
  }
}

.content {
  flex: 1;
  padding: 20px;
  padding-bottom: 100px;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}

.overview-card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  .overview-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 15px 0;
    color: #333;
  }

  .overview-stats {
    display: flex;
    justify-content: space-around;

    .stat-item {
      text-align: center;

      .stat-value {
        font-size: 24px;
        font-weight: 700;
        color: #1877F2;
        margin-bottom: 5px;
      }

      .stat-label {
        font-size: 12px;
        color: #666;
      }
    }
  }
}

.data-categories {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.data-category-card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }

  .category-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    .category-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
    }

    .category-info {
      flex: 1;

      .category-name {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 5px 0;
        color: #333;
      }

      .category-description {
        font-size: 14px;
        color: #666;
        margin: 0;
      }
    }

    .category-actions {
      display: flex;
      align-items: center;
      gap: 10px;

      .favorite-button {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #f0f0f0;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background: #e0e0e0;
        }

        svg {
          color: #999;
          transition: color 0.3s;
        }

        &.active svg {
          color: #FF6B6B;
          fill: #FF6B6B;
        }
      }

      .arrow {
        color: #999;
        font-size: 16px;
        font-weight: 600;
      }
    }
  }

  .category-data {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .data-preview {
      .current-value {
        font-size: 24px;
        font-weight: 700;
        color: #333;
      }

      .unit {
        font-size: 14px;
        color: #666;
        margin-left: 5px;
      }
    }

    .trend-indicator {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      border-radius: 15px;
      font-size: 12px;
      font-weight: 600;

      &.up {
        background: #e8f5e8;
        color: #4caf50;
      }

      &.down {
        background: #ffeaea;
        color: #f44336;
      }

      &.stable {
        background: #f0f0f0;
        color: #666;
      }

      .trend-text {
        font-size: 12px;
      }
    }
  }
}

.loading-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #666;

  .loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #1877F2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
  }
}

.no-more {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 14px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;

  .empty-icon {
    margin-bottom: 20px;
  }

  h3 {
    font-size: 18px;
    margin: 0 0 10px 0;
    color: #666;
  }

  p {
    font-size: 14px;
    margin: 0;
    color: #999;
  }
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #eee;
  display: flex;
  padding: 10px 0;
  z-index: 1000;

  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px;
    cursor: pointer;
    transition: color 0.3s;

    svg {
      color: #999;
      transition: color 0.3s;
    }

    span {
      font-size: 12px;
      color: #999;
      transition: color 0.3s;
    }

    &:hover {
      svg, span {
        color: #1877F2;
      }
    }

    &.active {
      svg, span {
        color: #1877F2;
      }
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 响应式调整
@media (max-width: 480px) {
  .content {
    padding: 15px;
  }

  .overview-stats {
    flex-direction: column;
    gap: 15px;
  }

  .category-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    .category-icon {
      margin-right: 0;
    }

    .category-actions {
      align-self: flex-end;
    }
  }
}
</style> 